<template>
  <div class="icon-select">
    <!-- 搜索栏 -->
    <div class="mb-3 p-3">
      <InputText v-model="searchQuery" placeholder="搜索图标..." class="w-full" />
    </div>

    <TabView>
      <!-- PrimeVue 图标 -->
      <TabPanel header="PrimeVue" :pt="{}" value="prime">
        <div class="grid grid-cols-6 gap-2">
          <div
            v-for="icon in filteredPrimeIcons"
            :key="icon"
            class="icon-item p-2 cursor-pointer hover:bg-primary-50 rounded-md text-center"
            @click="selectIcon('prime', icon)"
          >
            <i :class="`pi pi-${icon}`" />
            <div class="text-xs mt-1 truncate">{{ icon }}</div>
          </div>
        </div>
      </TabPanel>

      <!-- Iconify 图标 -->
      <TabPanel header="Iconify" :pt="{}" value="iconify">
        <div class="grid grid-cols-6 gap-2">
          <div
            v-for="icon in filteredIconifyIcons"
            :key="icon"
            class="icon-item p-2 cursor-pointer hover:bg-primary-50 rounded-md text-center"
            @click="selectIcon('iconify', icon)"
          >
            <Icon :icon="icon" />
            <div class="text-xs mt-1 truncate">{{ icon }}</div>
          </div>
        </div>
      </TabPanel>
    </TabView>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue'
  import { Icon } from '@iconify/vue'
  import { PRIME_ICONS } from './prime-icons'
  import { ICONIFY_ICONS } from './iconify-icons'

  interface IconValue {
    type: 'prime' | 'iconify'
    name: string
  }

  const props = defineProps<{
    modelValue?: IconValue
  }>()

  const emit = defineEmits<{
    (e: 'update:modelValue', value: IconValue): void
  }>()

  const searchQuery = ref('')

  const filteredPrimeIcons = computed(() =>
    PRIME_ICONS.filter(icon => icon.toLowerCase().includes(searchQuery.value.toLowerCase()))
  )

  const filteredIconifyIcons = computed(() =>
    ICONIFY_ICONS.filter(icon => icon.toLowerCase().includes(searchQuery.value.toLowerCase()))
  )

  const selectIcon = (type: 'prime' | 'iconify', name: string) => {
    emit('update:modelValue', { type, name })
  }
</script>

<style scoped>
  .icon-item {
    transition: all 0.2s;
  }

  .icon-item:hover {
    transform: scale(1.05);
  }
</style>
